My Design work for Summer of Tech Auckland Hackfest 2017. I worked as a Designer in a student development team for a weekend creating a web application to solve a problem.
The issue we decided to tackle was the hassle of looking for various information about a neighbourhood before moving in. Finding a place to live is a tricky business - not only would you want a comfortable home, but you want to make sure that your community is suitable for your needs: good school, easy access to transport, a well-priced rent, etc. Unfortunately, people currently have to visit multiple sites in order to gather all the required information for their needs. This takes a lot of time and can be difficult to keep track of.
Our solution is a brand new platform to find information about suburbs in New Zealand. This platform in its completion will tell you everything you need to know about a suburb, including transport, schools and recreation. Furthermore, it will show that information in a visually-appealing and simple way. This is AvoToast.
Lo-Fi Prototyping: Paper Prototypes
We first started by a discussion about what functions we want to show for our solution. Each member of our team then made a small drawing showing what the basic prototype might look like, before I consolidated the common features and drew more detailed paper prototypes.
The early concept for our solution is finding a way to visualise housing prices in real-time. A common feature during our brainstorm is the idea of a Heatmap showing the average prices of each suburb in a region. My first sketch for this feature include a map of suburb boundaries and the names and prices of the suburbs on top. This was later on revised, as there was an issue of the areas being too small for the labels, making it difficult to read.
Early idea for a search bar. We had wanted to search by price and location.
The user is able to select a suburb, and it will zoom in to a street view showing pins with properties available for rent. If they select one of those pins, it will show a pop up box with information about the selected property.
Second Iteration Paper Prototype
Start screen begins in a default region (Auckland), which shows the main areas where the user can select to explore.
Feedback from users about the first prototype brought up a potential visibility issue from the sidebar at the left side of the map taking up too much space, and perhaps showing unneeded information for users who do not wish to see the cheapest prices. In the second iteration I have made 2 alternatives, a little box that hides the sidebar like a menu, and hiding the table on the side, indicated by a tab.
At the street view, I considered adding a button which immediately centers the user at the location of the cheapest property in the suburb.
Wireframing - Photoshop
Loading screen
Region Map + Hover Effect
Note: the different green colours are part of the Heatmap colour scheme. The lighter the green colour, the cheaper the property (and vice versa).
The green colour is used in order to match the theme of the Avocado. This is also reflected in the brown colour of the labels on the map.
District Map + Lowest Prices Dropdown Table
Hi-Fi Prototyping: HTML/CSS/JS
This version of the prototype was a combined work with the development team. Due to time constraint, we decided to show our product assuming the user has already selected a region, and are now viewing the different suburbs.
The map rendering was done using Google Maps API, and due to the colour of the map, the regions are coloured in a traditional Heatmap colour scheme (temperature-based) in order to avoid confusion and increase visibility.
As at the end of the 2nd day of Hackfest (deadline), we have 2 colours used for the Heatmap. The yellow (lighter colour) is used for lower-priced rent prices, and the red (darker colour) is used for higher-priced rent prices. The user will be able to see which areas have the highest rent prices by referring to the map.
The user is able to zoom in and out of the map using the + and - buttons at the bottom right hand side of the map.
We decided to personalise the pin graphic to an Avocado pin. The pin indicates the name of the suburb and the average price in that suburb. The user can see this information by hovering over the Avocado pin.
The dropdown table showing the cheapest rent prices are integrated with the title of the region in order to reduce reduncancy. The contents of the table should change depending on the day. Clicking on an entry in the dropdown table should direct the user to the related suburb and zoom in.
Unique Value Proposition
Our platform relies on visual information and only revealing important information when the user needs it, thus giving a simple, decluttered look. We also emphasise on real-time information. Having the latest data will help users planning to move into a community to make a more informed decision.
Out of Scope (as per weekend due date - 2 days)
- a detailed search function (including sort and filter)
- zoom in street view of suburbs and available properties
- more colours for Heatmap (to show more differentiation of prices)
Team Members
- Sabaoon Raza Khan
- Pyungeun Samuel Park
- Jennifer Perry
- Rachel Wong
